<template>
	<view class="my-tour">
		<v-tour
			name="myTour" 
			:steps="steps"
			:options="myOptions"
			:callbacks="myCallbacks"></v-tour>
	</view>
</template>

<script>
	export default {
		name: 'tour',
		data() {
			return {
				isAdd: false,
				myOptions: {
					useKeyboardNavigation: false,
					highlight: true,
					labels: {
						buttonSkip: '跳过',
						buttonPrevious: '上一步',
						buttonNext: '下一步',
						buttonStop: '结束',
					},
				},
				myCallbacks: {
					onStop: () => {
						console.log('停止了');
						this.isAdd = true;
					},
				},
				steps: [
					{
						target: '.chicken',
						content: `这是步骤内容<strong>Vue Tour</strong>!`,
					},
					{
						target: '#EHRCode',
						content: '这是步骤内容',
					},
					{
						target: '[data-v-step="2"]',
						content: '这是步骤内容',
					}
				],
			}
		},
		onReady() {
			console.log(1111111)
			this.$tours['myTour'].start();
		},
	}
</script>

<style lang="scss" scoped>
.my-tour {
	position: absolute;
	z-index: 99999999;
}
// vue-tour引导页
.v-tour__target--highlighted {
	box-shadow: 0 0 0 99999px rgba(0,0,0,.4);
}
::v-deep .v-step {
	background-color: rgba(red, .4);
}
</style>